<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#d1{
				position: absolute;
				width: 111px;height: 111px;
				background: crimson;
			}
		</style>
	</head>
	<body>
		<div id="d1"></div>
		<script type="text/javascript">
			var div=document.getElementById("d1");
			div.onmousedown=function(e){
				//按下元素时获取当前鼠标所在的位置
			var x=e.clientX-div.offsetLeft;
			var y=e.clientY-div.offsetTop;
				document.onmousemove=function(eve){
				div.style.left=eve.clientX-x+"px";
				div.style.top=eve.clientY-y+"px";
				}	
			}
			//取消绑定
				div.onmouseup=function(){
					document.onmousemove=null;
				}
		</script>
		
	</body>
</html>
